﻿/*
Taken from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

/* Note: this design isn't really responsive due to the amount of moving things around being done... 
		 It's pretty much serving a different version of the site based on screen size. Flow is
		 not really a consideration.
*/

/*Icon by Freepik from www.flaticon.com is licensed by CC BY 3.0 */


/* Android browser <= 534.30 fix
   This adds a webkit-only fake animation to make the menu & search labels clickable on older Android browsers.
   It is applied to the body element in the media query below.
   Source: http://timpietrusky.com/advanced-checkbox-hack
*/
@-webkit-keyframes android-checkbox-bugfix { 
	from {padding:0;}
	to {padding:0;}
}


/* iOS Orientation fix
   These declarations are redundant, but they improve the behavior of the banner 
   on iOS when switching between portrait and landscape orientations.
*/
/* portrait*/
@media
only screen and (min-width: 0px) and (max-width: 600px) and (orientation:portrait), 
only screen and (-webkit-min-device-pixel-ratio: 3) and (orientation:portrait), 
only screen and (-moz-device-pixel-ratio: 3) and (orientation:portrait), 
only screen and (min-resolution: 3dppx) and (orientation:portrait) {
    #global-nav-container {
        position: fixed;
    }
}
/* landscape */
@media
only screen and (min-width: 0px) and (max-width: 600px) and (orientation:landscape), 
only screen and (-webkit-min-device-pixel-ratio: 3) and (orientation:landscape), 
only screen and (-moz-device-pixel-ratio: 3) and (orientation:landscape), 
only screen and (min-resolution: 3dppx) and (orientation:landscape) {
    #global-nav-container {
        position: fixed;
    }
}



/* Smartphones (portrait and landscape) ----------- */

@media
only screen and (min-width: 0px) and (max-width: 600px), 
only screen and (-webkit-min-device-pixel-ratio: 3), 
only screen and (-moz-device-pixel-ratio: 3), 
only screen and (min-resolution: 3dppx) {

	@-ms-viewport {
		/*width: device-width;*/
		width: auto;
		zoom: 1.0;
	}
	
	/* RIBBON */
	/* hide the ribbon on the authoring site. We do not support any authoring functionality in the mobile view. */
	#s4-ribbonrow {
		display: none;
	}
	
	#s4-workspace {
		min-width: 0;
	}
	
	input {
		/*-webkit-appearance: none;  don't know why this was originally here, but it was hiding radio buttons on the Office Locator. */
		border-radius: 0;
	}
	
	img {
		max-width: 100%;
		height: auto !important;
	}
	
	h4#ks-breadcrumb {
		padding: 5px 0 12px 0; /*10px 5px;*/
		font-size: 13px;
	}
	
	div#s4-workspace, BODY #s4-mainarea, .wrapper {
		height: auto;
		width: auto;	
		background: none;
	}		
	
	div.article, div.welcome {
		padding: 5px;	
	}


	body, body #s4-bodyContainer, #srsfooter, #amberAlert, .footer-1, .footer-2, .footer-3, .footer-4, .push, body #s4-topheader2,
	.ks-feature-left, .ks-feature-right,.ks-feature-wide, .s4-title-inner {
		width: auto !important;
		min-width: inherit;
	}
		
	#srsfooter #footer-main-phone-lines li {
		float: none;
	}
	
	div.ks-quicklinks {
		display: none;
	}
	
	#PrintPage {
		display: none;	
	}
	
	#s4-mainarea {
		padding: 0px 10px 10px 10px;
	}
	
	.wrapper {
		margin: auto;
	}
	
	.footer, #srsfooter {
		background: #282828;
		padding: 0px;
		text-align: center;
		height: auto !important;
	}
	
	.push {
		display: none;
	}
		
	#srsfooter #footer-social-icons img {
		max-height: 75px;
	}
	
	#srsfooter #footer-main-phone-lines li strong {
		text-align: center;
	}
	
	#srsfooter p {
		font-size:10pt;	
	}
	
	#srsfooter p span{
		display:inline-block;
 		text-align:center;
 		font-size:10pt; 		
 		padding-bottom: 10px;		 		
	}
		
	/*.kanvet-container div {	
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	*/
	.kanvet-container {	
		text-align:center;	
		padding:0px;		
		width:90%;
	}
	.kanvet-container ul {
		display:inline-block;
	}
	
	.kanvet-container li{	
		margin:auto;	
		display:inline;						
	}
	
	.kanvet-container li img{
		max-height: 110px;
	}
	

	/* NAVIGATION */
	
	#global-nav-container {
		height: 50px;
		background-color: #282828;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 10;
		text-align: center;
	}
			
	.s4-toplinks .s4-tn a.selected span.additional-background, .s4-toplinks .s4-tn a:hover span.additional-background {
		background: inherit;
		color: inherit;
		height: inherit;
	}
	
	.s4-toplinks ul.root>li.static>a.static, .s4-toplinks ul.root>li.static>ul>li>a.static {
		border: 0;	
		padding:0;
		margin:0;
	}
	
	#global-nav-container > div.s4-tn {
		-webkit-transform:translateZ(2px);
	    -moz-transform:translateZ(2px);
	    -o-transform:translateZ(2px);
	    transform:translateZ(2px);
		position:fixed;
		top: 50px;
		left: -220px; /*this needs to be further off the screen by the few pixels, not at the edge, to prevent IE zooming problems.*/
		background-color: #282828;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
	#global-nav-container ul.root > li > a {
		/* hide home link */
		display: none;	
	}
	
	#global-nav-container > div.s4-tn li.static {
		float: none;	
		background-color: #303030;
		border-bottom: 5px solid #282828;
		width: 200px;
		height: 30px;
		vertical-align: middle;
		z-index:3;
	}
	
	.s4-tn li.static > .menu-item {
		font-size: 14px;
		display: block;
		float: none;
		height: 100%;
	}
	
	input.menu-toggle {
		display: block;	
	}
	
	#global-nav-trigger, #search-flyout-trigger {
		clip: rect(0,0,0,0);
		position:absolute;
	}
	
	#cover {
		height: 100%;
		width: 100%;
		background: #282828;	
	}
	
	#global-nav-container label {
		position: fixed;
		top: 1px;
		z-index: 2;
		width: 48px;
		height: 48px;
		cursor: pointer;	
	}
	
	.home-button-container {
		display: block;
		position: fixed;
		top: 1px;
		width: 40%;
		margin: 0 0 0 -20%; /* center horizontally... the 20% is 1/2 of the 40% width of the element, combined with left:50%, this centers the element */
		left: 50%;
		z-index: 2;
		text-align: center;
	}
	
	.home-button-container,
	.home-button-container > a,
	.home-button-container > a > img {
		height:inherit !important;
	}

	.home-button-container img {
		border: none;
		max-height: 98%;
	}

	label[for="global-nav-trigger"] {
		left: 5px;
	    background-image: url("/web/20170125135200oe_/http://www.dcf.ks.gov/Style Library/Images/menuicon.png");
	    background-size: 30px 30px;
	    background-position:50% 50%;
	    background-repeat: no-repeat;
	}
	
	label[for="search-flyout-trigger"] {
		right: 5px;
		background-image: url('/web/20170125135200oe_/http://www.dcf.ks.gov/Style Library/Images/appbar.magnify.png');
		background-size: 48px 48px;
	    background-position: 50% 50%;
	}
	
	#search-container {
		position: fixed;
		top: -55px; /* similar the menu, this should be off the screen with a small gap to the screen edge to prevent IE rendering problems. */
		left: 0px;
		z-index: -50;
		text-align: center;
		background-color: #282828;
		width: 100%;
		height: 40px;
		padding-top: 10px;
		border-bottom: 1px solid lightgray;
	}
	
	#s4-searcharea {
		margin-left: auto;
		margin-right: auto;	
		float: none;
		width: 232px;
	}
	
	#customSearchBox, input[title="Search..."] {
		font-size: 20px !important;	/* this is purely to prevent auto zoom mobile devices.... */
		height: 25px;
	}
	
	#s4-searcharea img.srch-gosearchimg {
		height: 27px !important;
	}
	
	#search-flyout-trigger:checked ~ div#search-container {
		top: 50px;	
		z-index: 2;
	}
	
	#global-nav-trigger:checked ~ div.s4-tn {
		left: 0px;
	}
	
	#global-nav-trigger:checked ~ #transition-layer {
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: transparent;
	}
	
	/* Android browser <= 534.30 fix 
	   See animation at the top of the file for more info.
	*/
	body {
		-webkit-animation: android-checkbox-bugfix infinite 1s;
	}
			
	#global-nav-trigger ~ div.s4-tn {
		transition: 0.2s;
	}
	
	#search-flyout-trigger ~ div#search-container {
		transition: 0s;
	}
	
	/* header and logo */
	.s4-title, #s4-titlerow {
		background: transparent;
		background-image: none;	
		border: none;
	}
	.s4-title, body #s4-topheader2 {
		height: auto;	
		margin: 0;
	}
	
	.s4-title-inner{
		display: none;
	}	
	
	div.shadow {
		border: none;
		display: none;
	}
	
	/* HOME PAGE */
	
	.ks-program, .ks-feature-left, .ks-feature-right, .ks-feature-wide {
		width: auto;
		float: none;	
	}
	
	.ks-program-row {
		border: none;	
	}
	
	.ks-program-row h2 {
		background: #282828;
		color: white;
		margin: 5px;
		padding: 10px;
		font-size: 1em;
		position: relative;
	}
	
	.ks-program-row h2 .navToggleIndicator {
		position: absolute;
		right: 10px;
		bottom: 2px;
		font-size: 1.8em;
	}
	
	.ks-content-row {
		padding-top: 0;
	}
	
	.ks-program > table {
		margin:5px;
		padding: 5px;
		display: none;	
	}
	
	.ks-program > table .item {
		margin: 10px 0px;	
	}
	
	.ks-feature h2 {
		text-align: center;
	}
	
	.ks-feature-left img {
		margin-left:auto;
		margin-right: auto;
		display: block;	
	}
	
	.ks-content, .ks-feature-left, .ks-feature-right, .ks-feature-wide {
		margin: 0;
		margin-top: 10px;
	}
	
	/* SERVICES PAGE */
	/* This section has some very specific selectors so they only target services pages in theory.... */
	
	h1.services-nav-heading, .services-nav-panel, .s4-ca {
		margin: 0;	
	}
	
	h1.services-nav-heading {
		background: #282828;
		color: white;
		width: 97%;
		position: relative;
	}
	
	h1.services-nav-heading span.ks-sitetitle {
		color: white;
		display: inline-block;
		width: 90%
	}
	
	h1.services-nav-heading span.ks-sitetitle:after {
		content: ' Links';
	}
	
	h1.services-nav-heading span.ks-pagetitle {
		display: none;	
	}
	
	div.services-nav-panel {
		display: none;
		padding-top: 0px !important;
	}
	
	div.services-nav-panel .s4-ql {
		margin: 0px;	
	}
	
	.services-nav-panel .menu-horizontal li.static {
		clear: both;
		float: none;
		height: 20px;
		padding-bottom: inherit !important;
	}

	.services-nav-panel .menu-horizontal li.static a {
		display: block;
		/*height: auto;	*/
		width: auto;
		color: inherit !important;
		background: inherit;
		padding: inherit;
	}
	
	.dfwp-list a 
	{
	    font-size: 1.2em !important;
	}
	
	div.ks-services-list .menu-horizontal li.static {
		float: left;
		height: auto;		
		margin-right: 10px;
	}
	
	div.ks-services-list .menu-horizontal li.static a {
		/* undo all of the other stuff we do... */
		display: inline-block;
		color: inherit !important;
		background: inherit;
		float: left;
	}
	
	div.ks-services-list .s4-ql .menu-horizontal li.static a.selected {
		color: #AECC36 !important;
	}
	
	.ks-services-table td[class^="ks-th"] {
		width: auto;
		padding-right: 10px;
	}
	
	.ks-services-table td[class^="ks-td"] {
		border-left: none;
	}


	
	/* Horizontal Navs */
	h1.s4-titletext {
		margin: auto;
		padding: 5px;
	}
	
	h1.s4-titletext .navToggleIndicator {
		position: absolute;
		right: 10px;
		bottom: 1px;
		font-size: 1.4em;
	}
		
	.menu-horizontal {
		width: 100%;	
		padding: 5px;
	}	
	
	h1 {
		padding: 5px;
	}
	
	body #s4-leftpanel-content {
		padding-left: inherit;
	}

	.menu-horizontal li.static {
		float: none;
		border-left: none !important;
		padding: 0px !important;
		display: block;
		padding-bottom: 12px !important;
		height: 40px;
	}
	
	.menu-horizontal li.static a {
		display: block;
		width: 100%;
		text-align: center;	
		height: 30px;
		background: #282828;
		color: white !important;
		padding-top: 8px !important;
	}
	
	/* SEARCH RESULTS */
	
	.srchctr_leftcell, .srch-maintopright {
		display: none;	
	}
	
	span[title="Search Again"] {
		display: none !important;
	}

	
	.srch-maintop2 #WebPartWPQ11, .srch-maintop2 {
		width: auto;	
		padding: 0;
	}
	
	.srch-results {
		padding: inherit;	
	}	
	.srchctr_mainleftcell #WebPartWPQ8 {
		width: 300px !important;	
	}
	
		
	/* Begin search results width fix
	   Fixes a problem with search results being too wide when a URL is present.
	   Because it's inside a table, word-wrap: break-word does not work.
	   The table must be set to fixed layout for it to work.
	   To undo, uncomment the first selector and delete the others */

	/*.srchctr_mainleftcell .s4-wpTopTable, #SRSB > div, .srch-Metadata1 {
		width: auto !important;	
	}*/
	form[action^="results.aspx?k="] #ctl00_MSO_ContentDiv table {
		table-layout: fixed;
	}
	form[action^="results.aspx?k="] #ctl00_MSO_ContentDiv > table tbody tr:first-child td[colspan="3"] {
		display: none;
	}
	td.srchctr_rightcell {
		display: none;
	}
	/* end search results width fix */

	
	.srch-Title2, .srch-Description, .srch-Metadata2, .srch-Metadata1 {
		max-width: 250px;	
	}
	
	.srch-Metadata2 {
		margin: 0px 20px;	
	}
	
	.srch-Page {
		padding: inherit;
	}
	
	.srch-Page a:link {
		padding: 4px 5px;	
	}
	
	#search-container #SRSB {
		margin-left: auto;
		margin-right: auto;	
		float: none;
		width: 220px;
	}
	
	#search-container #SRSB img[Title="Search"] {
		height: 28px !important;
		width: 30px !important;
	}

	#search-container #SRSB .ms-sbplain {
		padding: 2px 3px 0;
		height: 25px;
		width: 191px !important;
		border: 1px solid #e3e3e3 !important;
		font-style: italic;
		color: #476382;
	}
	
	#search-container #SRSB .ms-sbtable {
		width: 237px;
	}
		
	#MSOZoneCell_WebPartWPQ6 .s4-wpTopTable {
		margin: auto;	
	}
	
	#redirect-button-container {
		width: 200px;
	}
}




/* Responsive table classes ----------- */

@media only screen and (max-width: 400px)
{
    /* Force table to not be like tables anymore */
    .dcf-responsive-table-A-400,
    .dcf-responsive-table-A-400 thead,
    .dcf-responsive-table-A-400 tfoot,
    .dcf-responsive-table-A-400 tbody,
    .dcf-responsive-table-A-400 tr,
    .dcf-responsive-table-A-400 th,
    .dcf-responsive-table-A-400 td {
        display: block;
    }

    /* hide table headers */
    .dcf-responsive-table-A-400 thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .dcf-responsive-table-A-400 tr {
        border: 1px solid black;
    }

    .dcf-responsive-table-A-400 tbody td {
        /* Behave like a "row" */
        border: none;
        border-bottom: 1px solid black;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        min-height: 1.3em; /* ensures empty data cells still show their rows */
        font-family: sans-serif;
        /*height: auto !important;*/ /* this is solely to set a static height on the 2nd table rows, because IE doesn't recognize min-height */
    }

    .dcf-responsive-table-A-400 tbody td::before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 5px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        /* Label the data */
        content: attr(data-title);
    }
}


